import 'package:flutter/material.dart';
import '../router/router.dart';
import 'side_menu_item.dart';
import 'side_menu_bar.dart';
import 'side_top_nav_bar.dart';
import 'side_top_tab_bar.dart';
import 'side_setting_bar.dart';
import 'underside_footer.dart';
import 'dart:async'; // 导入异步流支持

/// Miaoyi UI框架主布局组件
/// 
/// 提供类似于Web框架的布局结构：
/// - 左侧折叠导航菜单
/// - 顶部导航栏
/// - 标签页导航
/// - 主内容区域
/// - 右侧可选边栏
class MainLayout extends StatefulWidget {
  /// 主要内容区域的子组件
  final Widget child;
  
  /// 应用标题
  final String title;
  
  /// 是否默认折叠左侧菜单
  final bool? defaultCollapsed;
  
  /// 是否启用右侧边栏
  final bool? enableRightSidebar;
  
  /// 自定义菜单项
  final List<SideMenuItem>? menuItems;

  const MainLayout({
    super.key,
    required this.child,
    this.title = 'Flutter Miaoyi UI框架',
    this.defaultCollapsed,
    this.enableRightSidebar,
    this.menuItems,
  });

  @override
  State<MainLayout> createState() => _MainLayoutState();
}

class _MainLayoutState extends State<MainLayout> {
  bool _isCollapsed = false;
  String _currentPage = 'home';
  List<String> _openTabs = ['home'];
  List<String> _routeHistory = ['home']; // 路由历史记录
  int _historyIndex = 0; // 历史记录当前索引
  
  // 是否显示右侧边栏
  bool _showRightSidebar = false;
  
  // 默认菜单项
  late List<SideMenuItem> _menuItems;
  
  // 路由变更订阅
  StreamSubscription? _routeSubscription;

  @override
  void initState() {
    super.initState();
    _isCollapsed = widget.defaultCollapsed ?? false;
    _showRightSidebar = widget.enableRightSidebar ?? false;
    
    // 设置默认菜单项，如果没有提供自定义菜单
    _menuItems = widget.menuItems ?? getSideMenuItems();
    
    // 初始化路由系统
    AppRouter().initRoutes();
    
    // 获取初始路由（从当前URL）
    final initialRoute = _getInitialRoute();
    print('初始路由: $initialRoute'); // 添加调试信息
    
    // 设置默认菜单项和路由历史
    _currentPage = initialRoute;
    _openTabs = [initialRoute];
    _routeHistory = [initialRoute];
    _historyIndex = 0;
    
    // 订阅路由变更通知
    _routeSubscription = AppRouter().onRouteChange.listen(_handleRouteChange);
    
    // 如果初始路由不是"home"，触发一次路由更新
    if (initialRoute != 'home') {
      // 使用短延迟确保组件已完全挂载
      Future.delayed(Duration.zero, () {
        // 更新URL以确保浏览器地址栏和实际路由一致
        AppRouter.updateUrl('/$initialRoute');
      });
    }
  }
  
  /// 获取初始路由（从当前URL）
  String _getInitialRoute() {
    // 获取当前URL路径
    String path = Uri.base.path;
    print('当前URL路径: $path'); // 添加调试信息
    
    // 如果路径为空或仅为根路径，返回默认首页
    if (path.isEmpty || path == '/') {
      return 'home';
    }
    
    // 移除开头的斜杠（如果有）
    if (path.startsWith('/')) {
      path = path.substring(1);
    }
    
    // 检查路径是否有对应的路由配置
    final routeConfig = AppRouter().getRouteConfig(path);
    if (routeConfig != null && routeConfig.page != null) {
      return path;
    }
    
    // 如果找不到匹配的路由配置，返回默认首页
    return 'home';
  }
  
  @override
  void dispose() {
    // 取消路由变更订阅
    _routeSubscription?.cancel();
    super.dispose();
  }
  
  /// 处理路由变更通知
  void _handleRouteChange(String route) {
    print('收到路由变更通知: $route, 当前路由: $_currentPage'); // 添加调试信息
    
    // 确保路由是规范化的路径（不带前导斜杠）
    final normalizedRoute = route.startsWith('/') ? route.substring(1) : route;
    
    if (normalizedRoute != _currentPage) {
      print('更新页面至: $normalizedRoute'); // 添加调试信息
      setState(() {
        _currentPage = normalizedRoute;
        
        // 将当前路由添加到标签页中
        if (!_openTabs.contains(normalizedRoute)) {
          _openTabs.add(normalizedRoute);
        }
        
        // 更新路由历史
        if (_historyIndex < _routeHistory.length - 1) {
          _routeHistory = _routeHistory.sublist(0, _historyIndex + 1);
        }
        _routeHistory.add(normalizedRoute);
        _historyIndex = _routeHistory.length - 1;
      });
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 左侧导航栏
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            width: _isCollapsed ? 70 : 220,
            child: SideMenuBar(
              title: widget.title,
              isCollapsed: _isCollapsed,
              menuItems: _menuItems,
              currentPage: _currentPage,
              onMenuItemSelected: _onMenuItemSelected,
            ),
          ),
          
          // 主内容区域
          Expanded(
            child: Column(
              children: [
                // 顶部导航栏
                SideTopNavBar(
                  showRightSidebar: _showRightSidebar,
                  onRightSidebarToggle: _toggleRightSidebar,
                  isCollapsed: _isCollapsed,
                  onMenuCollapsedToggle: _toggleMenuCollapsed,
                ),
                
                // 标签页导航
                SideTopTabBar(
                  currentPage: _currentPage,
                  openTabs: _openTabs,
                  onTabChanged: _onTabChanged,
                  onTabClosed: _onTabClosed,
                  canGoBack: _canGoBack(),
                  canGoForward: _canGoForward(),
                  onBackPressed: _onBackButtonPressed,
                  onForwardPressed: _onForwardButtonPressed,
                  onRefreshPressed: _onRefreshPressed,
                ),
                
                // 内容区域
                Expanded(
                  child: _buildContentArea(),
                ),
                
                // 底部区域
                UndersideFooter(),
              ],
            ),
          ),
          
          // 右侧边栏（可选）
          if (_showRightSidebar)
            AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              width: 280,
              child: SideSettingBar(
                isCollapsed: _isCollapsed,
                onCollapsedChanged: (value) {
                  setState(() {
                    _isCollapsed = value;
                  });
                },
              ),
            ),
        ],
      ),
    );
  }
  
  /// 菜单项选择回调
  Future<void> _onMenuItemSelected(String routeName) async {
    // 添加延迟 160 毫秒，以确保动画完成后在进行状态更新
    await Future.delayed(const Duration(milliseconds: 160));
    
    // 更新浏览器URL和应用内导航
    AppRouter.updateUrl(routeName);
    
    // 注意：现在不需要在这里更新状态，因为会通过路由变更通知来处理
  }
  
  /// 标签页切换回调
  void _onTabChanged(String routeName) {
    // 更新浏览器URL和应用内导航
    AppRouter.updateUrl(routeName);
    
    // 注意：现在不需要在这里更新状态，因为会通过路由变更通知来处理
  }
  
  /// 标签页关闭回调
  void _onTabClosed(int index) {
    setState(() {
      final closedTab = _openTabs.removeAt(index);
      if (closedTab == _currentPage && _openTabs.isNotEmpty) {
        // 切换到另一个标签页
        _currentPage = _openTabs.last;
        // 更新URL
        AppRouter.updateUrl(_currentPage.startsWith('/') ? _currentPage : '/$_currentPage');
      }
    });
  }
  
  /// 切换菜单折叠状态
  void _toggleMenuCollapsed() {
    setState(() {
      _isCollapsed = !_isCollapsed;
    });
  }
  
  /// 切换右侧边栏显示状态
  void _toggleRightSidebar() {
    setState(() {
      _showRightSidebar = !_showRightSidebar;
    });
  }
  
  /// 刷新按钮点击回调
  void _onRefreshPressed() {
    setState(() {
      // 刷新逻辑
    });
  }
  
  /// 判断是否可以返回
  bool _canGoBack() {
    return _historyIndex > 0;
  }
  
  /// 判断是否可以前进
  bool _canGoForward() {
    return _historyIndex < _routeHistory.length - 1;
  }
  
  /// 返回按钮点击
  void _onBackButtonPressed() {
    if (_canGoBack()) {
      setState(() {
        _historyIndex--;
        _currentPage = _routeHistory[_historyIndex];
        // 更新浏览器URL
        AppRouter.updateUrl(_currentPage.startsWith('/') ? _currentPage : '/$_currentPage');
      });
    }
  }
  
  /// 前进按钮点击
  void _onForwardButtonPressed() {
    if (_canGoForward()) {
      setState(() {
        _historyIndex++;
        _currentPage = _routeHistory[_historyIndex];
        // 更新浏览器URL
        AppRouter.updateUrl(_currentPage.startsWith('/') ? _currentPage : '/$_currentPage');
      });
    }
  }
  
  /// 构建内容区域
  Widget _buildContentArea() {
    print('构建内容区域，当前路由: $_currentPage'); // 添加调试信息
    
    // 使用路由配置获取页面构建器
    final routeConfig = AppRouter().getRouteConfig(_currentPage);
    print('找到路由配置: ${routeConfig?.title}'); // 添加调试信息
    
    if (routeConfig != null && routeConfig.page != null) {
      return routeConfig.page!;
    } else {
      print('未找到页面组件，路由: $_currentPage'); // 添加调试信息
      
      // 尝试查找可能的父路由
      final parentRoute = AppRouter().findParentRoute(_currentPage);
      print('可能的父路由: $parentRoute');
      
      return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.error_outline,
                color: Colors.red,
                size: 64,
              ),
              const SizedBox(height: 16),
              Text(
                '页面未找到: $_currentPage',
                style: const TextStyle(
                  fontSize: 24,
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                ),
              ),
              if (parentRoute != null) ...[
                const SizedBox(height: 8),
                Text(
                  '所属父级: $parentRoute',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.grey.shade600,
                  ),
                ),
              ],
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {
                  AppRouter.updateUrl('/home');
                },
                child: const Text('返回首页'),
              ),
            ],
          ),
        ),
      );
    }
  }
} 